<ix-modal-header
  [title]="'Localization Settings' | translate"
  [loading]="isFormLoading()"
></ix-modal-header>
<mat-card>
  <mat-card-content>
    <form class="ix-form-container" [formGroup]="formGroup" (submit)="submit()">
      <ix-fieldset [title]="fieldsetTitle | translate">
        <ix-combobox
          [formControlName]="language.fcName"
          [label]="language.label | translate"
          [tooltip]="language.tooltip | translate"
          [provider]="language.provider"
          [required]="true"
        ></ix-combobox>

        @if (!(isEnterprise$ | async) || true) {
          <p class="language-hint" [innerHtml]="language.hint | translate"></p>
        }

        <ix-select
          [label]="kbdMap.label | translate"
          [options]="kbdMap.options"
          [required]="true"
          [formControlName]="kbdMap.fcName"
        ></ix-select>
        <ix-combobox
          [formControlName]="timezone.fcName"
          [label]="timezone.label | translate"
          [provider]="timezone.provider"
          [required]="true"
        ></ix-combobox>
        <ix-select
          [label]="dateFormat.label | translate"
          [options]="dateFormat.options"
          [formControlName]="dateFormat.fcName"
        ></ix-select>
        <ix-select
          [label]="timeFormat.label | translate"
          [options]="timeFormat.options"
          [formControlName]="timeFormat.fcName"
        ></ix-select>
      </ix-fieldset>

      <ix-form-actions>
        <button
          mat-button
          type="submit"
          color="primary"
          ixTest="save"
          [disabled]="formGroup.invalid || isFormLoading()"
        >
          {{ 'Save' | translate }}
        </button>
      </ix-form-actions>
    </form>
  </mat-card-content>
</mat-card>
